<template>
  <div class="m-supplier">
    <div @click="showSupplierDialog">
      <el-input
        placeholder="请选择供应商"
        v-model="selCusName"
        clearable
        readonly
        @mouseenter.native="mouseEnter"
        @mouseleave.native="mounseLeave"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
        <span
          slot="suffix"
          @click="inputClearSon"
          class="m-cleanInput"
          v-show="inputClearBut"
        >
          <i class="el-input_icon el-icon-circle-close el-input__clear"></i>
        </span>
      </el-input>
    </div>
    <el-dialog
      title="供应商信息"
      v-if="srmSupplierDialogVisible"
      :visible.sync="srmSupplierDialogVisible"
      width="50%"
      :before-close="srmSupplierDialogClose"
      v-dialogDrag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <srmSupplierInfo
        ref="srmSupplierInfo"
        :layout="layout"
        @setSrmSupplierInfo="setSrmSupplierInfo"
      ></srmSupplierInfo>
    </el-dialog>
  </div>
</template>
<script>
import srmSupplierInfo from "@/components/srmSupplierInfo.vue";
import Msg from "@/public/message.js";
import _Api from "@/api";
export default {
  props: {
    value: String,
    layout: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    srmSupplierInfo
  },
  data() {
    return {
      srmSupplierDialogVisible: false,
      inputClearBut: false,
      selCusName: "",
      selCusCode: ""
    };
  },
  methods: {
    setSrmSupplierInfo(msg) {
      if (msg.length > 0) {
        this.srmSupplierDialogVisible = false;
        this.selCusCode = msg[0].id;
        this.selCusName = msg[0].supplierName;
        this.$emit("update:supplierInfo", msg[0]);
        this.$emit('search')
      }
    },
    srmSupplierDialogClose(done) {
      this.$refs.srmSupplierInfo.keyWord = "";
      this.$refs.srmSupplierInfo.selSupplierOptions.api.setQuickFilter(
        this.$refs.srmSupplierInfo.keyWord
      );
      done();
    },
    mounseLeave() {
      if (this.selCusName != "") this.inputClearBut = false;
    },
    mouseEnter() {
      if (this.selCusName != "") this.inputClearBut = true;
    },
    initData(){
      this.selCusCode = "";
      this.selCusName = "";
    },
    inputClearSon(ev) {
      ev.stopPropagation();
      this.initData();
      this.$emit("update:supplierInfo", {});
      this.$emit('search')
      this.inputClearBut = false;
    },
    showSupplierDialog() {
      if (!this.layout.companyCode) {
        Msg.showPopMsg("提示：请选择公司！");
        return;
      } else {
        this.srmSupplierDialogVisible = true;
        this.$nextTick(_ => {
          this.$refs.srmSupplierInfo.search();
        });
      }
    }
  },
  watch: {
      'layout.companyCode'(val, oldVal){
          if(val !== oldVal) {
            this.initData();
          }
      }
  }
};
</script>